<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>数据报表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑 -->
        <!-- 卡片 -->
        <el-card>
            <!-- <div ref="mychart" style="width:100%;height:600px;"></div> -->
            <div id="container" style="width:90%;height:400px"></div>
            <div id="container2" style="width:90%;height:400px"></div>
            <div id="container3" style="width:90%;height:400px"></div>
        </el-card>
        <!-- 卡片 -->
        <div class="home"></div>
    </div>
</template>

<script>
// import { reportsApi } from '@/http/api'
// import * as echarts from 'echarts'
export default {
  data() {
    return {
      mychart: null,
      preData: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  mounted() {
    // this.getchart()
    // window.addEventListener('resize', this.mychart.resize)
    
    // 基本地图---------------------------------------
    var map = new BMapGL.Map('container')
    // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915)
    // 创建点坐标
    map.centerAndZoom(point, 15)

    // 2d地图--------------------------------------
    //使用Map类实例化
 const map1 = new BMapGL.Map('container2')
 //指定地图中心点，通常是一个经纬度
 const point1 = new BMapGL.Point(116.215347, 40.142612)
 //生成百度地图
 map1.centerAndZoom(point1, 19)
 //设置允许滚轮缩放
 map1.enableScrollWheelZoom()
 let i = 0;
 setInterval(function() {
i++
 console.log('i:', i)
//地图水平方向旋转
map1.setHeading(i);
 }, 800)

 //地图前后方向倾斜
 map1.setTilt(73);
//  3d------------------------------------------------------------------
 //使用Map类实例化
 const map2 = new BMapGL.Map('container3')

 //指定地图中心点，通常是一个经纬度
 const point2 = new BMapGL.Point(121.671125, 31.144737)

 //生成百度地图
 map2.centerAndZoom(point2, 1)

 //设置允许滚轮缩放
 map2.enableScrollWheelZoom()

 //卫星图,BMAP_EARTH_MAP|BMAP_NORMAL_MAP
 map2.setMapType(BMAP_EARTH_MAP)

  },
  methods: {
    // async getchart() {
    //   // 1.获取dom
    //   const chartdom = this.$refs.mychart
    //   // 2.初始化
    //   this.mychart = echarts.init(chartdom)
    //   const res = await reportsApi()
    //   // 3.配置图表数据
    //   const option = { ...this.preData, ...res }
    //   // 4.渲染生成图表
    //   this.mychart.setOption(option)
    // }
  }
}
</script>

<style scoped >
.el-card {
  margin-top: 20px;
}
/* #mychart{
    width: 800px;
    height: 400px;
    border: 1px solid #f00;
    margin: 20px auto;
} */
</style>
